<template>
	<div>
		<div v-if="login">
			<el-row>
				<el-col :span="4">
					<el-radio-group v-model="radio">
					    <el-radio :label="1">1</el-radio>
					    <el-radio :label="2">2</el-radio>
					    <el-radio :label="3">3</el-radio>
							<el-radio :label="4">4</el-radio>
							<el-radio :label="5">5</el-radio>
							<el-radio :label="6">6</el-radio>
					</el-radio-group>
					<el-button @click="setId()">提交用户ID</el-button>
				</el-col>
			</el-row>
		</div>
		<div v-else>
			<el-container>
				<el-header>
					<el-row :gutter="10">
						<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
							<el-input v-model="friend_id" placeholder="添加好友,请输入对方ID"></el-input>
						</el-col>
					  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
							<el-button @click="addfriend()">提交</el-button>
						</el-col>
					</el-row>
				</el-header>
				<el-container>
					<el-aside width="200px">
						<div class="friendList">
							<h3>好友列表</h3>
							<el-badge class="friendItem" v-for="(item, index) in friend_group" :key="index" v-if="item.is_online==0" :value="item.unread" :max="99">
								<el-button @click="currentChat(item.user_id)" style="width: 100%;">
									<span>用户ID:{{item.user_id}}</span></br>
									<span>状态:离线</span>
								</el-button>
							</el-badge>
							<el-badge class="friendItem" v-for="(item, index) in friend_group" :key="index" v-if="item.is_online==1" :value="item.unread" :max="99">
								<el-button @click="currentChat(item.user_id)" style="width: 100%;">
									<span>用户ID:{{item.user_id}}</span></br>
									<span>状态:</span><span style="color: red;">在线</span>
								</el-button>
							</el-badge>
						</div>
					</el-aside>
					<el-main>
						<div class="chat" ref="box">
							<blockquote v-for="(item, index) in chat_list[another_id]" :key="index">
								<el-row :gutter="10" v-if="item.user_id!=user_id">
									<el-col style="width: auto;">
										<div class="block"><el-avatar :size="50">对方</el-avatar></div>
									</el-col>
									<el-col style="width: auto;">
										<el-card shadow="always">{{item.msg}}</el-card>
									</el-col>
								</el-row>
								<el-row :gutter="10" v-if="item.user_id==user_id">
									<el-col style="width: auto;float: right;">
										<div class="block"><el-avatar :size="50">我</el-avatar></div>
									</el-col>
									<el-col style="width: auto;float: right;">
										<el-card shadow="always">{{item.msg}}</el-card>
									</el-col>
								</el-row>
								<br/>
							</blockquote>
						</div>
						<el-input class="textarea" type="textarea" v-model="msg"></el-input>
						<el-button @click="sendChat()" class="sendBtn" type="success" round>发送</el-button>
					</el-main>
				</el-container>
			</el-container>
		</div>
	</div>
</template>

<script>
export default {
  name: 'Index',
	data: function(){
		return {
			radio: 1,
			ws : null,
			login: true,
			user_id: '',
			friend_id: '',
			friend_group: [],
			chat_list: [],
			another_id: '',
			msg: '',
			reconnect: false,
			timer: null,
		}
	},
	
	mounted: function(){
		
		this.initWecsocket();
	
	},
	
	beforeDestroy(){
		clearInterval(this.timer)
	},
	
	methods: {
		
			setId: function(){
				this.user_id = this.radio
				let data = {    
					'type': 'online',
					'user_id': this.radio
				};
				this.sendData(data);
				this.login = false;
				let that = this;
				document.onkeydown = function(e) {   //按下回车提交
						let key = window.event.keyCode;  
						//事件中keycode=13为回车事件
						if (key == 13) {
								that.sendChat();
						}
				};
			},
			
			addfriend: function(){
				let data = {
					'type': 'joinfriend',
					'user_id': this.user_id,
					'friend_id': this.friend_id
				};
				this.sendData(data);
			},
			
			currentChat: function(fridens_id){
				let that = this;
				if(this.another_id != fridens_id){
					this.friend_group.forEach(function(v,k){
						if(v.user_id==fridens_id){
							that.friend_group[k].unread = '0'
						}
					});
					this.msg = '';
					this.another_id = fridens_id;
				}
			},
			
			sendChat: function(){
				if(!this.another_id){
					this.$notify({
						title: '提示',
						message: '请选择聊天对象',
						type: 'warning'
					});
					return false;
				}
				let data = {
					'type': 'sendChat',
					'user_id': this.user_id,
					'another_id': this.another_id,
					'msg': this.msg
				}
				this.chat_list[this.another_id].push({
					'user_id': this.user_id,
					'msg': this.msg
				})
				this.scrolldown();
				this.msg = '';
				this.sendData(data);
			},
			
			sendData: function(data){
				let msg = JSON.stringify(data);
				this.ws.send(msg);
			},
			
			scrolldown: function(){
				let that = this;
				setTimeout(function(){
					let div = that.$refs.box;
					div.scrollTop = div.scrollHeight;
				},1)
			},
			
			initWecsocket: function(){
				this.ws = new WebSocket('ws://39.108.237.19:8282');
				let that = this;
				
				this.ws.onmessage = function(event){
					let data = JSON.parse(event.data)
					if(data.code == '0'){
						that.$notify({
							title: '错误',
							message: data.content,
							type: 'warning'
						});
						return false;
					}
					let func = data.type;
					eval("that."+func+"(data)");
				}
				
				this.ws.onopen = function(event){
					that.reconnect = false;
					clearInterval(that.timer);
				}
				
				this.ws.onclose = function(event){
					that.reconnect = true;
					that.timer = setInterval(function(){
						that.initWecsocket();
					},5000)
				}
				
			},
				
			online: function(data){
				let that = this;
				this.friend_group.forEach(function(v,k){
					if(v.user_id==data.user_id){
						that.friend_group[k].is_online = '1'
					}
				});
			},
			
			offline: function(data){
				let that = this;
				this.friend_group.forEach(function(v,k){
					if(v.user_id==data.user_id){
						that.friend_group[k].is_online = '0'
					}
				});
			},
			
			friendlist: function(data){
				console.log(data.content)
				let that = this;
				this.friend_group = data.content
				this.friend_group.forEach(function(v,k){
					that.chat_list[v['user_id']] = [];
				});
			},
			
			joinfriend: function(data){
				console.log(data)
				if(data.code == 1){
					this.friend_group.push(data.content);
					this.chat_list[data.content.user_id] = [];
				}
			},
			
			chat: function(data){
				this.chat_list[data.user_id].push({
					'user_id': data.user_id,
					'msg': data.msg
				})
				this.scrolldown();
				let that = this;
				if(this.another_id!=data.user_id){
					this.friend_group.forEach(function(v,k){
						if(v.user_id==data.user_id){
							that.friend_group[k].unread = parseInt(that.friend_group[k].unread)+1
						}
					});
				}
				this.chat_list = JSON.parse(JSON.stringify(this.chat_list))
			}

	},
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.friendList{
	overflow-x: hidden;
	overflow-y: scroll;
	text-align: center;
	border: black 1px solid;
	height: 500px;
	width: 190px;
}
.friendItem{
	margin-top: 10px;
	width: 85%;
	border: #cccccc solid 1px;
	border-radius: 5px;
}
.chat{
	overflow-x: hidden;
	overflow-y: scroll;
	border: black 1px solid;
	height: 380px;
}
.textarea{
	margin-top: 20px !important;
}
.sendBtn{
	margin-top: 20px;
	float: right;
}
.el-main{
	padding: 0;
}
</style>
